import React, {Component} from "react";
import {
	View, 
	Text, 
	TouchableOpacity, 
	KeyboardAvoidingView,
	ScrollView,
} from "react-native";
import {Checkbox,Button} from "antd-mobile";
import {observer} from "mobx-react/native";

import InputText from "./../components/InputText";
import User from "./../models/User";
import styles from "./style";

const CheckboxItem = Checkbox.CheckboxItem;

@observer
export default class Register extends Component {
	static navigationOptions = {
		title: "注册",
	}
	constructor(props) {
		super(props);
	}
	submitUserInfo = () => {
		const {navigate} = this.props.navigation;
		User.setRegister();
		navigate("login");
	}
	render() {
		return (
			<ScrollView
				keyboardDismissMode="interactive"
				>
				<KeyboardAvoidingView behavior="padding" style={{paddingTop: 15}}>
					<View>
						<InputText
							style={styles.inputText}
							textStyle={styles.textStyle}
							text="邀请码(选填)"
							underlineColorAndroid={gColor.borderColor}
							onChange={(event) => {
								User.userinfo.userId = event.nativeEvent.text;
							}}
						/>
					</View>
					<Text style={[styles.textStyle, styles.textFontSize, styles.textColor, {marginTop: 3}]}>不填邀请码注册送10个易积分</Text>
					<Text style={[styles.textStyle, styles.textFontSize, styles.textColor, {marginTop: 3}]}>通过好友邀请码注册送30个易积分</Text>
					<View style={styles.viewBlock}>
						<Text style={[styles.textStyle, styles.wrightInfo]}>必填信息</Text>
						<InputText
							style={styles.nameText}
							containerStyle={styles.containerText}
							textStyle={[styles.textStyle, styles.textColor]}
							text="真实姓名"
							underlineColorAndroid={gColor.borderColor}
							onChange={(event) => User.userinfo.userName = event.nativeEvent.text}
						/>
						<InputText
							style={styles.inputText}
							containerStyle={{marginTop: 10}}
							textStyle={styles.textStyle}
							text="请设置登录御易健平台密码"
							underlineColorAndroid={gColor.borderColor}
							onChange={(event) => User.userinfo.userPassword = event.nativeEvent.text}
						/>
						<View style={styles.viewBlock}>
							<InputText
								style={styles.inputText}
								textStyle={styles.textStyle}
								text="手机号(+86)"
								underlineColorAndroid={gColor.borderColor}
								onChange={(event) => User.userinfo.userPhone = event.nativeEvent.text}
							/>
							<View style={{marginTop: 10}}>
								<InputText
									style={styles.inputText}
									textStyle={styles.textStyle}
									text="验证码"
									placeholder="短信中6位数字"
									underlineColorAndroid={gColor.borderColor}
								/>
								<TouchableOpacity style={{position: "absolute", bottom: 7, right: 24,}}>
									<Text style={styles.btn}>
										发送验证码
									</Text>
								</TouchableOpacity>
							</View>
							<View>
								<CheckboxItem style={{backgroundColor: "transparent"}}>
									<Text>同意御易健用户注册协议</Text>
								</CheckboxItem>
							</View>
						</View>
					</View>
					<View style={{padding: 10,margin: 10}}>
						<Button onClick={this.submitUserInfo}>注册</Button>
					</View>
					
				</KeyboardAvoidingView>
			</ScrollView>
		);
	}
}